<!-- src/views/visual/VisualList.vue -->
<template>
  <main class="main-content">
    <div class="breadcrumb">
      <span class="breadcrumb-item">视联网管理</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-item active">视频设备</span>
    </div>                
    <div class="visual-list-wrapper">
      <!-- 左侧筛选面板 -->
      <div class="left-filter-panel">
        <div class="search-box">
          <input type="text" class="form-input" placeholder="输入站点或设备名称搜索">
          <span class="search-icon">🔍</span>
        </div>
        <ul class="filter-tree">
          <li class="tree-item"><input type="checkbox" id="all"> <label for="all">全市 (100)</label></li>
          <li class="tree-item"><input type="checkbox" id="d12"> <label for="d12">12区 (20)</label></li>
          <li class="tree-item"><input type="checkbox" id="d_xxx"> <label for="d_xxx">xxx公司排污口</label></li>
        </ul>
      </div>
      <!-- 右侧内容面板 -->
      <div class="right-content-panel">
        <div class="table-container">
          <table class="data-table">
            <thead>
              <tr>
                <th><input type="checkbox"></th>
                <th>设备名称</th><th>设备类型</th><th>设备状态</th><th>累计告警数</th><th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="device in visualDevices" :key="device.id">
                <td><input type="checkbox"></td>
                <td>{{ device.name }}</td>
                <td>{{ device.type }}</td>
                <td><span class="status-tag" :class="device.status.class">{{ device.status.text }}</span></td>
                <td>{{ device.alarmCount }}</td>
                <td class="action-links">
                  <router-link :to="`/visual/detail/${device.id}`">查看实时</router-link>
                  <a href="#">历史回放</a>
                  <a href="#">告警记录</a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="pagination-bar">
          <span class="total-count">共 80 条数据</span>
          <!-- 分页器... -->
        </div>
      </div>
    </div>
  </main>
</template>

<script setup>
import { ref } from 'vue';

const visualDevices = ref([
  { id: 'cam001', name: 'XXX公司排污出口', type: 'AI视频监控', status: { text: '在线', class: 'status-online' }, alarmCount: 12 },
  { id: 'cam002', name: 'XXX公司排污出口', type: 'AI视频监控', status: { text: '离线', class: 'status-offline' }, alarmCount: 0 },
  // ...更多数据
]);
</script>

<style scoped>
@import '../../assets/css/visual.css';

/* 修复在Vue组件中布局可能出现的问题 */
.main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.visual-list-wrapper {
  flex-grow: 1;
  overflow: hidden;
}
</style>